<!DOCTYPE html>
<html>
    <head>
    	<title><%= title %></title>
    	
    	<link rel="stylesheet" type="text/css" href="/KG/lib/jmpress/jmpress.css" />

		<script type="text/javascript" src="/KG/KG.min.js"></script>
		
		<style>
			#jmpress{

			}

			.step{
				width:900px;
				height:450px;
				text-align: center;
				transition : opacity 800ms;
			}

			.step:not(.active){opacity:0.2;}
		</style>

    </head>
    <body>
        
    	<div id="jmpress">
    		<!-- <div class="step s1" >A</div>
    		<div class="step s2" data-x="500">B</div>
    		<div class="step s3" data-x="0" data-y="400">C</div>
    		<div class="step s1" data-x="500" data-y="400">D</div>
    		<div class="step s2" data-x="0" data-y="800">E</div>
			<div class="step s3" data-x="1000">F</div> -->

    	</div> 






    </body>
</html>

<script type="text/javascript">

function getData(callback){
	var data = [
		{
			title : 'AAAAAAAA',
			css : {
				background : '#009bba'
			},
			content : 'aaaaaaaaaaaaaa',
			animation : {
				
			}
		},
		{
			title : 'BBBBB',
			css : {
				background : '#ff0000'
			},
			content : 'bbbbbbbbbbb',
			animation : {
				x : 1000,
				phi : 200
			}
		},
		{
			title : 'CCCCCCCCC',
			css : {
				background : '#00ff00'
			},
			content : 'ccccccccccc',
			animation : {
				x : 2000
			}
		},
		{
			title : 'DDDDDDDDDD',
			css : {
				background : '#111',
				color : '#fff'
			},
			content : 'dddddddddddd',
			animation : {
				y : 500
			}
		},
		{
			title : 'EEEEEE',
			css : {
				background : '#ccc'
			},
			content : 'eeeeeeeeeee',
			animation : {
				x : 1000,
				y : 500
			}
		},
		{
			title : 'FFFFFFFFFFF',
			css : {
				background : '#9e8'
			},
			content : 'fffffffffffffff',
			animation : {
				x : 3000
			}
		}
	];

	callback(data);
}
//KG.openDebugModel();
seajs.use('/KG/plugin/Slide.min.js', function(Slide){
	var slide = new Slide($('#jmpress'), {
		hash : {
			use : true
		},
		theme : 'light',
		hasNav : true,
		slideData : getData,
		getHtml : function(data, index){
			var h = '<div><h1>'+data.title+'</h1><b>'+data.content+'</b></div>';
			return $(h);
		}
	});
});
	
				
				

</script>